<template>
    <el-dialog :title="title" v-model="openRemarkDialog" width="597px" append-to-body style="margin-top: 99px!important;">
        <el-form ref="remarkRef" :model="remarkForm" :rules="remarkRules" label-width="90px" style="padding: 19px;">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="原因：">
                        <el-input
                            v-model="remarkForm.remark"
                            type="textarea"
                            :rows="5"
                            :disabled="isViewFlag"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-divider  style="margin: 0; border-top : 1px solid #e8e8e8;"/>
        <template #footer>
        <div class="dialog-footer">
            <el-button type="primary" @click="submitForm" v-if="!isViewFlag">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
        </template>
    </el-dialog>
</template>

<script setup>
const emit = defineEmits(['callBack']);
const openRemarkDialog = ref(false);
const title = ref('');
const isViewFlag = ref(false);

const data = reactive({
    remarkForm: {
        remark: ''
    },
    remarkRules: {
        remark: [
            { required: true, message: "原因不能为空", trigger: "blur" }
        ]
    }
});

const { remarkForm, remarkRules } = toRefs(data);

const addRemarkDialog = (content, type, isView = false) => {
    if (type === 'add') {
        title.value = '编辑原因';
    } else {
        title.value = '查看原因';
    }
    openRemarkDialog.value = true;
    remarkForm.value.remark = content;
    isViewFlag.value = isView;
};

defineExpose({
    addRemarkDialog
});

/** 提交按钮 */
function submitForm() {
    emit('callBack', remarkForm.value.remark);
    openRemarkDialog.value = false;
}
function cancel() {
    openRemarkDialog.value = false;
}
</script>